"use client"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; import { observer } from "mobx-react-lite"; import { useHOFStore } from "@/Stores"; import { HOF } from "@/hof/HOF"; import AvatarItem from "@/hof/AvatarItem"; import { AvatarLoading } from "@/Loading"; import useGetTotalTotalHOF from "@/hof/useGetTotalTotalHOF"; import useGetTotalHighestHOF from "@/hof/useGetTotalHighestHOF"; import useGetTotalStandHOF from "@/hof/useGetTotalStandHOF"; import useGetTotalBandHOF from "@/hof/useGetTotalBandHOF"; import useGetAtTotalHOF from "@/hof/useGetAtTotalHOF"; import useGetAtHighestHOF from "@/hof/useGetAtHighestHOF"; import useGetAtStandHOF from "@/hof/useGetAtStandHOF"; import useGetAtBandHOF from "@/hof/useGetAtBandHOF"; import useGetAbility5KHOF from "@/hof/useGetAbility5KHOF"; import useGetAbility7KHOF from "@/hof/useGetAbility7KHOF"; import useGetAbility9KHOF from "@/hof/useGetAbility9KHOF"; import useGetLevelHOF from "@/hof/useGetLevelHOF"; import { useTranslations } from "next-intl"; const getAvatarItems = (hofs: HOF[]) => { return hofs.map(({ avatarID, avatarName, text }) => ( <AvatarItem key={avatarID} avatarID={avatarID} avatarName={avatarName} text={text} /> )); }; export default observer(() => { const { tabPosition, totalTabPosition, atTabPosition, abilityTabPosition, setTabPosition, setTotalTabPosition, setAtTabPosition, setAbilityTabPosition, } = useHOFStore(); const t = useTranslations(); const { data: totalTotalHOF, isFetched: isTotalTotalHOFLoaded } = useGetTotalTotalHOF(); const { data: totalHighestHOF, isFetched: isTotalHighestHOFLoaded } = useGetTotalHighestHOF(); const { data: totalStandHOF, isFetched: isTotalStandHOFLoaded } = useGetTotalStandHOF(); const { data: totalBandHOF, isFetched: isTotalBandHOFLoaded } = useGetTotalBandHOF(); const { data: atTotalHOF, isFetched: isAtTotalHOFLoaded } = useGetAtTotalHOF(); const { data: atHighestHOF, isFetched: isAtHighestHOFLoaded } = useGetAtHighestHOF(); const { data: atStandHOF, isFetched: isAtStandHOFLoaded } = useGetAtStandHOF(); const { data: atBandHOF, isFetched: isAtBandHOFLoaded } = useGetAtBandHOF(); const { data: ability5KHOF, isFetched: isAbility5KHOFLoaded } = useGetAbility5KHOF(); const { data: ability7KHOF, isFetched: isAbility7KHOFLoaded } = useGetAbility7KHOF(); const { data: ability9KHOF, isFetched: isAbility9KHOFLoaded } = useGetAbility9KHOF(); const { data: levelHOF, isFetched: isLevelHOFLoaded } = useGetLevelHOF(); const getProperties = (i: number) => ({ className: tabPosition === i ? "active route" : "route", onClick: () => { setTabPosition(i); }, }); const getTotalProperties = (i: number) => ({ className: totalTabPosition === i ? "active route" : "route", onClick: () => { setTotalTabPosition(i); }, }); const getAtProperties = (i: number) => ({ className: atTabPosition === i ? "active route" : "route", onClick: () => { setAtTabPosition(i); }, }); const getAbilityProperties = (i: number) => ({ className: abilityTabPosition === i ? "active route" : "route", onClick: () => { setAbilityTabPosition(i); }, }); return ( <> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}>{t("hofTotalText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>{t("hofAtText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}>{t("hofAbilityText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(3)}>{t("hofLevelText")}</NavLink> </NavItem> </Nav> <TabContent activeTab={tabPosition}> <TabPane tabId={0}> <Nav tabs> <NavItem> <NavLink {...getTotalProperties(0)}>{t("hofTotal")}</NavLink> </NavItem> <NavItem> <NavLink {...getTotalProperties(1)}>{t("hofHighest")}</NavLink> </NavItem> <NavItem> <NavLink {...getTotalProperties(2)}>{t("hofStand")}</NavLink> </NavItem> <NavItem> <NavLink {...getTotalProperties(3)}>{t("hofBand")}</NavLink> </NavItem> </Nav> <TabContent activeTab={totalTabPosition}> <TabPane tabId={0}> <ListGroup> {isTotalTotalHOFLoaded ? ( getAvatarItems(totalTotalHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isTotalHighestHOFLoaded ? ( getAvatarItems(totalHighestHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isTotalStandHOFLoaded ? ( getAvatarItems(totalStandHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={3}> <ListGroup> {isTotalBandHOFLoaded ? ( getAvatarItems(totalBandHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={1}> <Nav tabs> <NavItem> <NavLink {...getAtProperties(0)}>{t("hofTotal")}</NavLink> </NavItem> <NavItem> <NavLink {...getAtProperties(1)}>{t("hofHighest")}</NavLink> </NavItem> <NavItem> <NavLink {...getAtProperties(2)}>{t("hofStand")}</NavLink> </NavItem> <NavItem> <NavLink {...getAtProperties(3)}>{t("hofBand")}</NavLink> </NavItem> </Nav> <TabContent activeTab={atTabPosition}> <TabPane tabId={0}> <ListGroup> {isAtTotalHOFLoaded ? ( getAvatarItems(atTotalHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isAtHighestHOFLoaded ? ( getAvatarItems(atHighestHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isAtStandHOFLoaded ? ( getAvatarItems(atStandHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={3}> <ListGroup> {isAtBandHOFLoaded ? ( getAvatarItems(atBandHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={2}> <Nav tabs> <NavItem> <NavLink {...getAbilityProperties(0)}>⑤K</NavLink> </NavItem> <NavItem> <NavLink {...getAbilityProperties(1)}>⑦K</NavLink> </NavItem> <NavItem> <NavLink {...getAbilityProperties(2)}>9K</NavLink> </NavItem> </Nav> <TabContent activeTab={abilityTabPosition}> <TabPane tabId={0}> <ListGroup> {isAbility5KHOFLoaded ? ( getAvatarItems(ability5KHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={1}> <ListGroup> {isAbility7KHOFLoaded ? ( getAvatarItems(ability7KHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> <TabPane tabId={2}> <ListGroup> {isAbility9KHOFLoaded ? ( getAvatarItems(ability9KHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> </TabContent> </TabPane> <TabPane tabId={3}> <ListGroup> {isLevelHOFLoaded ? ( getAvatarItems(levelHOF) ) : ( <AvatarLoading loadingCount={50} /> )} </ListGroup> </TabPane> </TabContent> </> ); });